<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
	<!--<![endif]-->
	<head>
		<%- include('../component/head') %>
	</head>
	<body>
		<div id="fh5co-page">

			<!-- 左边菜单 -->
			<%- include('../component/admin/left_menu') %>


			<div id="fh5co-main">
				<%- include('../component/admin/banner') %>
				<div class="row">
					<div class="col">
						<div class="card">
							<div class="card-header bg-primary text-white d-flex justify-content-between">
								<h6 class="mb-0 align-self-center" style="color: white;">相册管理</h6>
							</div>
							<div class="card-body" id="tables">

								<vxe-toolbar>
									<template #buttons>
										<vxe-button icon="fa fa-plus" @click="insertEvent()">新增</vxe-button>
									</template>
								</vxe-toolbar>

								<vxe-table
										border
										resizable
										show-overflow
										highlight-hover-row
										ref="xTable"
										height="500"
										:data="tableData"
										@cell-dblclick="cellDBLClickEvent">
									<vxe-table-column type="seq" width="60"></vxe-table-column>
									<vxe-table-column field="id" title="id"></vxe-table-column>

									<vxe-table-column field="p_img" title="图片地址"  show-overflow>
										<template #default="{ row }">
											<img v-if="row.p_img" :src="row.p_img" style="width: 100px;margin: 5px">
											<span v-else>无</span>
										</template>
									</vxe-table-column>

									<vxe-table-column title="操作" width="100" show-overflow>
										<template #default="{ row }">
											<vxe-button type="text" icon="fa fa-edit" @click="editEvent(row)"></vxe-button>
											<vxe-button type="text" icon="fa fa-trash-o" @click="removeEvent(row)"></vxe-button>
										</template>
									</vxe-table-column>
								</vxe-table>

								<vxe-modal v-model="showEdit" :title="selectRow ? '编辑&保存' : '新增&保存'" width="800" min-width="600"
										   min-height="300" :loading="submitLoading" resize destroy-on-close>
									<template #default>
										<vxe-form :data="formData" :rules="formRules" title-align="right"
												  title-width="100" @submit="submitEvent">

											<vxe-form-item title="相册图片" span="12" field="p_img">
												<template #default="{ data }">
													<img v-if="data.p_img" :src="data.p_img" @click="upImg(data)"
														 style="width: 100px;margin: 5px">
													<div v-else>
														<vxe-button @click="upImg(data)" icon="fa fa-download"
																	style="margin-bottom: 5px">上传图片
														</vxe-button>
													</div>
													<p>已选文件：{{ fileImg.name }}</p>
													<div class="progress">
														<div class="progress-bar progress-bar-info" role="progressbar"
															 aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
															 :style="{ width: progressText }">
														</div>
													</div>

												</template>
											</vxe-form-item>
											<vxe-form-item align="center" span="24">
												<template #default>
													<vxe-button type="submit" status="primary">提交</vxe-button>
													<vxe-button type="reset">重置</vxe-button>
												</template>
											</vxe-form-item>

										</vxe-form>
									</template>
								</vxe-modal>

								<vxe-pager
										:current-page.sync="page4.currentPage"
										:page-size.sync="page4.pageSize"
										:total="page4.totalResult"
										:layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']">
								</vxe-pager>

							</div>
						</div>
					</div>
				</div>

			</div>
		</div>

		<%- include('../component/admin/foot')%>
		<script>
			const $VXE = VXETable.modal;
			const $XSaveFile = VXETable.saveFile;
			const $XReadFile = VXETable.readFile;
			new Vue ({
				el: '#tables',
				data: {
					fileImg: '',
					progressText: '0',
					submitLoading: false,
					tableData: [],
					selectRow: null,
					showEdit: false,
					formData: {
						username: null,
						email: null
					},
					formRules: {},
					page4: {
						currentPage: 1,
						pageSize: 10,
						totalResult: 7
					},
				},
				created () {
					this.getData();
					mainFun();
				},
				methods: {
					upImg() {
						$XReadFile().then(params => {
							const {files} = params;
							Array.from(files).map(file => {
								this.fileImg = file;
							})
						})
					},
					upData(row, url) {
						this.submitLoading = false;
						const than = this;
						let file = this.fileImg;
						let progress = new XEAjax.Progress()
						progress.onUploadProgress = evnt => {
							let value = progress.value
							than.progressText = `${value}%`
							if (value === 100) {
								setTimeout(() => {
									than.progressText = '0%';
									than.fileImg = {name:''};
									this.showEdit = false;
								},500);
							}
						}

						let formBody = new FormData()
						formBody.append('photo', file)
						formBody.append('row', JSON.stringify(row));
						XEAjax.fetchPost(url, formBody, {progress}).then(res => {
							than.getData();
						}).catch(err => {
							$VXE.message({message: '未知错误！错误代码：' + JSON.stringify(err), status: 'error'});
						});
					},
					getData() {
						XEAjax.post('/photo/photo.getAll').then((res) => {
							if (res.msg === 's') {
								this.tableData = res.photoList;
								$VXE.message({message: "相册数据更新", status: 'success'});
							} else {
								$VXE.message({message: "获取相册失败", status: 'error'});
							}
						}).catch((err) => {
							$VXE.message({message: '未知错误！错误代码：' + JSON.stringify(err), title: '错误', status: 'error'});
						});
					},
					cellDBLClickEvent ({ row }) {
						this.editEvent(row)
					},
					insertEvent () {
						this.formData = {
							p_img: ''
						}
						this.selectRow = null
						this.showEdit = true
					},
					editEvent (row) {
						this.formData = {
							p_img: row.p_img
						}
						this.selectRow = row
						this.showEdit = true
					},
					removeEvent (row) {

						$VXE.confirm('您确定要删除该数据?').then(type => {
							if (type === 'confirm') {
								XEAjax.post('/photo/photo.del', row).then((res) => {
									if (res.msg === 's') {
										$VXE.message({message: '删除成功', status: 'success'});
										this.getData();
									} else {
										$VXE.message({message: '删除失败', status: 'error'});
									}

								}).catch((err) => {
									$VXE.message({message: '未知错误！错误代码：' + JSON.stringify(err), status: 'error'});
								});
							}
						})
					},
					submitEvent () {
						this.submitLoading = true
						if (this.selectRow) {
							Object.assign(this.selectRow, this.formData);
							this.upData(this.selectRow,'/photo/photo.up');
						} else {
							this.upData(this.formData,'/photo/photo.add');
						}
					}
				}
			})
		</script>
	</body>
</html>
